<template>
	<view>
		<view class="banner">
			<image v-if="!img" src="../static/images/WechatIMG1449.jpg" mode=""></image>
			<image v-else :src="imageUrl + img" mode=""></image>
		</view>
		<view class="title">
			{{ name }}
			<view class="title-tab">
				<view class="title-left" style="display: flex; font-weight: 600">
					<view :class="tabTitle === 0 ? 'active' : ''" @click="changeTitleTab(0)">
						<div>赛事</div>
						<div>直播</div>
					</view>
					<view :class="tabTitle === 2 ? 'active' : ''" @click="changeTitleTab(2)">
						<div>赛事</div>
						<div>简介</div>
					</view>
					<view :class="tabTitle === 3 ? 'active' : ''" @click="changeTitleTab(3)">
						<div>参赛</div>
						<div>球队</div>
					</view>
					<view :class="tabTitle === 4 ? 'active' : ''" @click="changeTitleTab(4)">
						<div>赛事</div>
						<div>推荐</div>
					</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: center" class="shareBox"
					@click="shareCanvas()">分享</view>
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;background: white;padding-right:50rpx">
			<view @click="changeId" style="padding-left: 80rpx;display:flex;align-items:center">
				<image src="../static/images/qiehuan.png" style="width: 40rpx;height:40rpx"></image>
				<text style="margin-left: 10rpx;font-size: 32rpx">切换</text>
			</view>
			<view class="">总场次：{{matchNumber}}</view>
			<view style="display: flex;align-items: center;" @click="saveGood">
				<image :src="`../static/images/${likeNum>0?'like_red':'like'}.png`" style="width: 40rpx;height:40rpx">
				</image>
				<view style="margin-left: 8rpx;">{{likeNum}}</view>
			</view>
		</view>
		<view style="background: #fff;font-weight: bold;text-align: center;padding: 20rpx;">
			<view style="border: 1rpx solid #eee;padding: 20rpx;border-radius: 16rpx;">
				<view style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 20rpx;">
					<view>
						<view>总得分</view>
						<view>{{LogContestAllObj.score}}</view>
					</view>
					<view>
						<view>总助攻</view>
						<view>{{LogContestAllObj.assists}}</view>
					</view>
					<view>
						<view>总抢断</view>
						<view>{{LogContestAllObj.steal}}</view>
					</view>
					<view>
						<view>总盖帽</view>
						<view>{{LogContestAllObj.block}}</view>
					</view>
					<view>
						<view>总篮板</view>
						<view>{{LogContestAllObj.backboard}}</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-around;">
					<view>
						<view>总观看量</view>
						<view>{{LogContestAllObj.viewNum||0}}</view>
					</view>
					<view>
						<view>总参赛人数</view>
						<view>{{LogContestAllObj.playerNum}}</view>
					</view>
					<view>
						<view>总参赛球队</view>
						<view>{{LogContestAllObj.teamNum}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--    赛事直播-->
		<view class="body-box" v-if="tabTitle == 0">
			<view class="team-title">
				<view class="team-title-left">
					<text :style="{color:clickIndex==0?'#ff6633':''}" @click="goTabs(0)">赛程列表</text>
					<text :style="{color:clickIndex==1?'#ff6633':'','margin-left': '70rpx'}"
						@click="goTabs(1)">赛事资讯</text>
				</view>
				<!-- <view class="team-title-right">新赛季> </view> -->
				<view class="team-title-right">
					<view class="team-right-item" @click="selectSearch">
						<image src="@/static/images/search.png" style="width: 36rpx;height:36rpx"></image>
						<text class="team-search"
							style="font-size: 26rpx;">{{searchTeamId?searchTeamName:'请选择球队'}}</text>
					</view>
					<view class="team-right-item">
						<image src="@/static/images/refresh.png" style="width: 36rpx;height:36rpx"></image>
						<text class="team-search" @click="refreshSearch">重置</text>
					</view>
				</view>
			</view>
			<view v-if="clickIndex==0">

				<view class="tab-box">
					<view :class="['tab', tab === 0 ? 'active' : '']" @click="changeTab(0)">
						<span class="tab-text">未结束</span>
					</view>
					<view :class="['tab', tab === 1 ? 'active' : '']" @click="changeTab(1)">
						<span class="tab-text">已结束</span>
					</view>
					<view :class="['tab', tab === 2 ? 'active' : '']" @click="changeTab(2)">
						<span class="tab-text">排行榜</span>
					</view>
				</view>
				<view class="teamdetail" v-if="tab != 2">
					<view class="list card-list" v-for="(item, ind) in list" :key="ind"
						@click="goTeamDetail(item.id, item)">
						<view class="team-time">
							{{ item.tournamentBeginTime }}
							<span v-if="item.type == 1" style="padding-left: 20rpx">
								小组赛</span>
							<span v-else-if="item.type == 2" style="padding-left: 20rpx">
								淘汰赛</span>
							<span v-else-if="item.type == 4" style="padding-left: 20rpx">
								半决赛</span>
							<span v-else-if="item.type == 5" style="padding-left: 20rpx">
								决赛</span>
							<span v-else-if="item.type == 6" style="padding-left: 20rpx">
								季军赛</span>
							<span v-else-if="item.type == 7" style="padding-left: 20rpx">
								排位赛</span>
							<span v-else-if="item.type == 8" style="padding-left: 20rpx">
								常规赛</span>
							<span v-else-if="item.type == 9" style="padding-left: 20rpx">
								季后赛</span>
							<span v-else style="padding-left: 20rpx"> 四强赛</span>
						</view>
						<view class="team-list-detail info-card">
							<view class="shuju" v-show="tab == 1" @click.stop="ongetCanvas(item.id)">
								数据报告
							</view>
							<view class="detail">
								<view class="team-img">
									<image :src="imageUrl + item.oneTeam.teamLogo" mode=""></image>
									<view style="padding-top: 20rpx">{{ item.oneTeam.teamName }}
									</view>
								</view>
								<view class="team-info" style="position: relative;">
									<view class="team-info-time">{{ item.tournamentBeginTime }}
									</view>
									<view
										style="color: #000;font-size: 22rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
										{{item.typeRemake}}
									</view>
									<view class="team-info-num">
										<view>{{ item.teamOneScore }}</view>
										<view>-</view>
										<view>{{ item.teamTwoScore }}</view>
									</view>
									<view class="team-info-status">
										<view v-if="item.state == 0">未开始</view>
										<view v-else-if="item.state == 1" style="color: red">进行中
										</view>
										<view v-else>已结束</view>
									</view>
								</view>
								<view class="team-img">
									<image :src="imageUrl + item.twoTeam.teamLogo" mode=""></image>
									<view style="padding-top: 20rpx">{{ item.twoTeam.teamName }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 排行榜 -->
				<view class="leaderboard" v-else>
					<view class="header_tab">
						<view class="item" @click="onSelctHeaderTab(1)" :class="{ cur: selectHeaderTab == 1 }">球队
						</view>
						<view class="item" @click="onSelctHeaderTab(2)" :class="{ cur: selectHeaderTab == 2 }">球员
						</view>
					</view>

					<view v-if="selectHeaderTab == 2">
						<view class="header_tab">
							<view class="item" style="
                padding-top: 10rpx;
                color: black;
                margin-top: 20rpx;
                width: 20%;
              ">阶段:
							</view>
							<view class="itemBox">
								<view class="item1" @click="onSelctHeaderTabJ('')" :class="{ cur1: allChoose == 0 }">全部
								</view>
								<view class="item1" v-for="(item, index) in items" :key="index"
									@click="onSelctHeaderTabJ(index)" :class="{ cur1: selectedItems.includes(item) }">
									{{ item.name }}
								</view>
							</view>
						</view>
						<view class="btn-box">
							<view class="btn unset" @click="reset()">重置</view>
							<view class="btn sure" @click="sure()">确认</view>
						</view>
					</view>

					<template v-if="selectHeaderTab == 1">
						<template v-for="item in oneList">
							<view style="padding: 40px 0 20rpx 20rpx; font-weight: 800">{{ item.name }}
							</view>
							<view class="top-hader">
								<view>球队</view>
								<view>胜负</view>
								<view>胜率</view>
								<view>场均</view>
								<view>积分</view>
							</view>
							<view class="top-hader-list" v-for="(child, index) in item.teanGroupingPlayTeamList">
								<view>
									<text style="color: red">{{ index + 1 }}</text>
									<image v-if="!child.baseBasketballTeam.teamLogo" src="@/static/user.jpg" mode="">
									</image>
									<image v-else :src="imageUrl + child.baseBasketballTeam.teamLogo" mode=""></image>
									<text>{{ child.baseBasketballTeam.teamName }}</text>
								</view>
								<view>{{ child.winNum }}/{{ child.lossNum }}</view>
								<view>{{ child.chanceWin }}%</view>
								<view>{{ child.goalDifference }}</view>
								<view>{{ child.points }}</view>
							</view>
						</template>
					</template>

					<template v-if="selectHeaderTab == 2">
						<view class="leaderboard-title" style="margin-top: 30rpx">
							<view class="leaderboard-title-left"></view>
							<view class="leaderboard-title-right">
								<view class="ranking">排名</view>
								<view class="profilePicture">头像</view>
								<view class="player-name">姓名</view>
								<view class="cansaiqiudui">球队</view>
								<view class="perGame table-perGame">场均</view>
								<view class="all">总计</view>
							</view>
						</view>
						<view class="leaderboard-detail">
							<view class="leaderboard-detail-left">
								<view :class="
                  type == 1
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(1)">得分
								</view>
								<view :class="
                  type == 2
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(2)" v-if="scoringWay == 0">三分
								</view>
								<view :class="
                  type == 7
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(7)" v-if="scoringWay == 1">二分
								</view>
								<view :class="
                  type == 3
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(3)">篮板
								</view>
								<view :class="
                  type == 4
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(4)">助攻
								</view>
								<view :class="
                  type == 5
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(5)">抢断
								</view>
								<view :class="
                  type == 6
                    ? 'leaderboard-detail-left-title active1'
                    : 'leaderboard-detail-left-title'
                " @click="changeType(6)">盖帽
								</view>
							</view>
							<view class="leaderboard-detail-right-box">
								<view class="leaderboard-detail-right" v-for="(item, ind) in rankingList" :key="ind">
									<view class="left-box">
										<view style="padding: 10rpx 0">
											<image src="../static/jin.png" mode="" v-if="ind == 0"></image>
											<image src="../static/yin.png" mode="" v-if="ind == 1"></image>
											<image src="../static/tong.png" mode="" v-if="ind == 2"></image>
											<view v-if="ind > 2" style="width: 50rpx">
												{{ item.noNum }}
											</view>
										</view>
										<view class="profile-box">
											<image
												:src="`https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${item.profilePicture}`"
												mode=""></image>
										</view>
										<view class="zhong-box">
											{{ item.playerName }}
										</view>
										<view class="teamName-box">
											{{ item.teamName }}
										</view>
										<view class="changjun-box">
											{{ item.average }}
										</view>
										<view class="total-box">
											{{ item.totalCount }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<!--  -->
				</view>
			</view>
			<view v-if="clickIndex==1">
				<playNews :contestId="id"></playNews>
			</view>
		</view>
		<uni-load-more v-if="tabTitle == 0 && clickIndex==0" :status="loadingType"></uni-load-more>
		<!--    赛事简介-->
		<view class="body-box" v-if="tabTitle == 2">
			<view class="listInfo">
				<view class="banner banner1">
					<image :src="imageUrl + liansaiInfo.logo" mode="aspectFit"></image>
				</view>
				<view class="listInfo-list">
					联赛名称:{{ liansaiInfo.contestName }}
				</view>
				<view class="listInfo-list">
					比赛时间:{{ liansaiInfo.createTime }}
				</view>
				<view class="listInfo-list"> 比赛地点:{{ liansaiInfo.addres }}</view>
				<view class="listInfo-list"> 比赛项目:{{ liansaiInfo.item }}</view>
				<view class="listInfo-list">
					比赛介绍:{{ liansaiInfo.introduce }}
				</view>
				<view class="listInfo-list">
					<view>主办单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>
				<view class="listInfo-list">
					<view>承办单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr1">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>
				<view class="listInfo-list">
					<view>协办单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr2">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>
				<view class="listInfo-list">
					<view>冠名单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr3">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>
				<view class="listInfo-list">
					<view>赞助单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr4">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>

				<view class="listInfo-list">
					<view>支持单位:</view>
					<view>
						<view v-for="(item, ind) in newStrArr5">{{ item.replace(",", "") }}
						</view>
					</view>
				</view>

				<view class="banner" v-for="(item, ind) in imgList" :key="ind" style="margin-bottom: 10rpx">
					<image :src="imageUrl + item" mode="heightFix"></image>
				</view>
			</view>
		</view>

		<!--    参赛球队-->
		<view class="body-box take-in-team-box" v-if="tabTitle == 3">
			<view class="take-in-team">
				<view class="listInfo-list team-list-box" v-if="cansaiqiuduiListTab == false"
					v-for="item in cansaiqiuduiList" :key="item.id" @click="selectTeam(item)">
					<!-- <image style="height: 10px; width: 10px" :src="item.teamLogo"></image> -->
					<view class="teamLogo">
						<image style="border-radius: 50%" :src="
                item.teamLogo !== ''
                  ? `${teamLogoDomain}${item.teamLogo}`
                  : '../static/result.png'
              "></image>
					</view>
					<view class="teamName">
						<span class="team-name-span">{{ item.teamName }}</span>
						<!-- <br /> -->
						<span class="team-num-span">{{ item.num }}人</span>
					</view>
				</view>
			</view>
			<view class="current-teamName-box" v-show="cansaiqiuduiListTab == true">
				<div class="teamName-real-box">{{ currentTeamName }}</div>
				<div class="teamName-back" @click="backToTeamList">
					<image src="../static/fanhui.png" mode=""></image>
				</div>
			</view>
			<view class="team-title" v-if="cansaiqiuduiListTab == true">
				<view :class="cansaiqiuduitab === 0 ? 'active' : ''" @click="changecansaiqiuduiTab(0)">比赛列表</view>
				<view :class="cansaiqiuduitab === 1 ? 'active' : ''" @click="changecansaiqiuduiTab(1)">数据</view>
				<view :class="cansaiqiuduitab === 2 ? 'active' : ''" @click="changecansaiqiuduiTab(2)">成员</view>
			</view>

			<!--      比赛列表-->
			<view class="tab-box" v-if="cansaiqiuduiListTab == true && cansaiqiuduitab == 0">
				<view :class="['tab', cansaiqiuduistateTab === 0 ? 'active' : '']"
					@click="changeCansaiqiuduiStateTab(0)">
					<span class="tab-text">未结束</span>
				</view>
				<view :class="['tab', cansaiqiuduistateTab === 1 ? 'active' : '']"
					@click="changeCansaiqiuduiStateTab(1)">
					<span class="tab-text">已结束</span>
				</view>
			</view>
			<view class="teamdetail">
				<view v-if="cansaiqiuduiListTab == true && cansaiqiuduitab == 0" class="list bisailiebiao"
					v-for="(item, ind) in selectCansaiqiuduiList" :key="ind" @click="goTeamDetail(item.id, item)">
					<view class="team-time">
						{{ item.tournamentBeginTime }}
						<span v-if="item.type == 1" style="padding-left: 20rpx">
							小组赛</span>
						<span v-else-if="item.type == 2" style="padding-left: 20rpx">
							淘汰赛</span>
						<span v-else-if="item.type == 4" style="padding-left: 20rpx">
							半决赛</span>
						<span v-else-if="item.type == 5" style="padding-left: 20rpx">
							决赛</span>
						<span v-else-if="item.type == 6" style="padding-left: 20rpx">
							季军赛</span>
						<span v-else-if="item.type == 7" style="padding-left: 20rpx">
							排位赛</span>
						<span v-else-if="item.type == 8" style="padding-left: 20rpx">
							常规赛</span>
						<span v-else-if="item.type == 9" style="padding-left: 20rpx">
							季后赛</span>
						<span v-else style="padding-left: 20rpx"> 四强赛</span>
					</view>
					<view class="team-list-detail">
						<!--            <view-->
						<!--                class="shuju"-->
						<!--                v-show="tab == 1"-->
						<!--                @click.stop="ongetCanvas(item.id)"-->
						<!--            >-->
						<!--              数据报告-->
						<!--            </view>-->
						<view class="detail">
							<view class="team-img">
								<image :src="imageUrl + item.oneTeam.teamLogo" mode=""></image>
								<view style="padding-top: 20rpx">{{ item.oneTeam.teamName }}
								</view>
							</view>
							<view class="team-info">
								<view class="team-info-time">{{ item.tournamentBeginTime }}
								</view>
								<view class="team-info-num">
									<view>{{ item.teamOneScore }}</view>
									<view>-</view>
									<view>{{ item.teamTwoScore }}</view>
								</view>
								<view class="team-info-status">
									<view v-if="item.state == 0">未开始</view>
									<view v-else-if="item.state == 1" style="color: red">进行中
									</view>
									<view v-else>已结束</view>
								</view>
							</view>
							<view class="team-img">
								<image :src="imageUrl + item.twoTeam.teamLogo" mode=""></image>
								<view style="padding-top: 20rpx">{{ item.twoTeam.teamName }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--      成员-->
			<view class="teamBig-box" v-if="cansaiqiuduiListTab == true && cansaiqiuduitab == 2">
				<view class="teamBig-box-left">
					<view class="score-title">编号-姓名</view>
					<view class="oneTemeList" v-for="(items, ind) in cansaiqiuduishujuList" :key="ind">
						<view>{{ items.code }}-{{ items.name }}</view>
						<!-- <view class="oneTemeList-name">{{ item.name }}</view> -->
					</view>
				</view>
				<view class="teamBig-box-right">
					<scroll-view style="width: 100%; border-top: 2rpx solid #efefef !important" scroll-x="true"
						class="scroll-Y" @scrolltoupper="upper">
						<view class="score-title">
							<view class="score-title-text score-title-img"> 头像 </view>
							<view class="score-title-text"> 得分 </view>
							<view class="score-title-text score-title-text-special"
								v-for="(item, ind) in chengyuanTableFilter" :key="ind">
								{{ item.cn }}
							</view>
						</view>
						<view class="score-title score-title-res" v-for="(item, ind) in cansaiqiuduishujuList"
							:key="ind" style="border-bottom: 0">
							<!--  -->
							<view class="score-title-img">
								<image
									:src="`https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${item.img||item.profilePicture}`">
								</image>
								<!-- <image  src="https://astraca.oss-cn-chengdu.aliyuncs.com/img/HuiYuan.jpg" alt="" ></image> -->
							</view>

							<view class="score-title-text">
								{{ item.typeScoreSum }}
							</view>
							<view class="score-title-text score-title-text-special"
								v-for="(itemm, indS) in item.typeMapList" :key="indS"
								v-if="isLabelNeeded(itemm.typeStr)">
								<!-- {{ item.typeMapList[chengyuanTable[indS]] }} -->
								<!-- {{ item.typeMapList[0] }} {{chengyuanTable[indS]['en']}} -->
								<!-- {{ chengyuanTable[indS].en}}-{{indS}} -->
								<!-- {{ '二分命中' include labelNeed }} -->
								{{
                  [
                    "罚球总命中率",
                    "一分总命中率",
                    "二分总命中率",
                    "三分总命中率",
                    "真实命中率",
                  ].includes(itemm.typeStr)
                    ? `${
                        itemm.typeCount
                          ? (itemm.typeCount * 100).toFixed(0) + "%"
                          : 0
                      }`
                    : itemm.typeCount
                }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!--      数据-->
			<view class="data-chart" v-if="cansaiqiuduiListTab == true && cansaiqiuduitab == 1">
				<view class="top-info-show">
					<view class="left-show">
						{{ num }}
					</view>
					<view class="right-show"> 胜{{ winNum }} - 负{{ loseNum }} </view>
				</view>
				<view class="data-stage-name">球队数据柱状图</view>
				<view class="score-graph">
					<BarChart v-if="barChartShow" :teamCompare="teamData" :copyTeamCompare="copyTeamData"
						:shujuDataList="shujuDataList" :scoringWay="scoringWay" />
				</view>
				<!-- 				<view class="data-stage-name">战绩</view>
				<view class="beat-graph">
					<view class="beat-graph-detail">
						<PieChart :value="0.6" :color="'#9BD398'" :color_bg="'#D9EED8'"/>
					</view>
					<view class="beat-graph-detail">
						<PieChart :value="0." :color="'#50B1D7'" :color_bg="'#B6DFEF'"/>
					</view>
					<view class="beat-graph-detail">
						<PieChart :value="0.5" :color="'#FF6221'" :color_bg="'#FFC5B1'"/>
					</view>
				</view> -->
				<view class="data-stage-name">总计</view>
				<view class="average-competition">
					<view class="average-competition-detail" v-for="(item, idx) in averagelabelen" :key="idx">
						<view class="detail-score">
							{{ teamData[item] }}
						</view>
						<view class="score-type">
							{{ averagelabel[idx] }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--    赛事推荐-->
		<view class="body-box saishituijian" v-if="tabTitle == 4">
			<view class="listInfo" v-if="loading">加载中...</view>
			<view class="listInfo" v-else-if="!saishituijian.length">暂无数据</view>
			<view class="listInfo" v-else>
				<view v-for="item in saishituijian" :key="item.id" class="item">
					<image v-if="item.img" :src="`https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${item.img}`"
						alt="标题" class="item-image" @click="jumpLink(item.jumpLink)"></image>
					<!-- <image v-else src="../static/images/img.png" alt="标题" class="item-image" ></image> -->
					<view class="item-title" style="
              text-align: center;
              margin: 20rpx 0;
              padding: 0 30rpx;
              white-space: normal;
            ">{{ item.title }}</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup2" type="bottom" background-color="#fff">
			<view style="max-height: 800rpx;overflow-y: auto;">
				<view class="teamSelect" v-for="item in cansaiqiuduiList" :key="item.id" @click="searchSure(item)">
					{{ item.teamName }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		wexinShare
	} from "@/common/js/utils.js";
	import config from "@/config";
	import BarChart from "@/components/BarChart.vue";
	import PieChart from "@/components/PieChart.vue";
	import {
		getLeagueH5TournamentList,
		setliveNum,
		getH5BriefInfo,
		getLeagueH5RankingList,
		getrankingList,
		getlive,
		getLeagueH5LiveBegin,
		getScore,
		getrankingListH5,
		getSaishituijianApi,
		getCansaiqiuduiApi,
		getCansaiqiuduishujuListApi,
		getShujuDataListApi,
		getsignature,
		getTournamentNumApi,
		getlikeNumApi,
		saveGoodApi,
		playerLogContestAll
	} from "@/api/tournament/index.js";
	import playNews from "./playNews.vue";
	export default {
		data() {
			return {
				loseNum: "",
				winNum: "",
				num: "",
				scoringWay: "",
				shujuDataList: {},
				cansaiqiuduiListTab: false,
				teamId: 0,
				cansaiqiuduitab: 0,
				tab: 0,
				cansaiqiuduistateTab: 0,
				list: [],
				cansaiqiuduiList: [],
				selectCansaiqiuduiList: [],
				cansaiqiuduishujuList: [],
				barChartShow: false,
				teamData: {
					lb: 0,
					ef: 0,
					sf: 0,
					fq: 0,
					gm: 0,
					zg: 0,
					qd: 0,
					fg: 0,
					score: 0,
				},
				copyTeamData: {
					lb: 0,
					ef: 0,
					sf: 0,
					fq: 0,
					gm: 0,
					zg: 0,
					qd: 0,
					fg: 0,
					score: 0,
				},
				id: "",
				imageUrl: "",
				teamLogo: "",
				type: 1,
				rankingList: [],
				pageData: {
					pageSize: 10,
					pageNum: 1,
				},
				loadingType: "more",
				name: "",
				img: "",
				oneList: [],
				twoList: [],
				selectHeaderTab: 1,
				scoringWay: 0,
				tabTitle: 0,
				liveList: [],
				videoSrc: "",
				videos: "",
				isvideo: false,
				player: "",
				liveListBegin: [],
				liansaiInfo: "",
				imgList: [],
				newStrArr: [],
				newStrArr1: [],
				newStrArr2: [],
				newStrArr3: [],
				newStrArr4: [],
				newStrArr5: [],
				selectedItems: [],
				allChoose: 0,
				items: [{
						id: "",
						name: "",
					},
					{
						id: 1,
						name: "小组赛",
					},
					{
						id: 2,
						name: "淘汰赛",
					},
					{
						id: 3,
						name: "四强赛",
					},
					{
						id: 4,
						name: "半决赛",
					},
					{
						id: 5,
						name: "决赛",
					},
					{
						id: 6,
						name: "季军赛",
					},
					{
						id: 7,
						name: "排位赛",
					},
					{
						id: 8,
						name: "常规赛",
					},
					{
						id: 9,
						name: "季后赛",
					},
				],
				selectedItemss: "",
				types: "",
				loading: true, // 加载状态
				saishituijian: [], // 存储数据
				averagelabel: ["得分", "篮板", "助攻", "抢断", "盖帽", "二分"],
				averagelabelen: ["score", "lb", "zg", "qd", "gm", "ef"],
				teamLogoDomain: "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/",
				chengyuanTableFilter: [],
				chengyuanTable: [
					// '二分命中', '三分命中', '盖帽', '抢断', '二分不中', '三分不中', '罚球不中',
					// '助攻', '篮板', '失误', '犯规', '一分命中', '罚球命中', '一分不中', '恢复暂停', '全场比赛结束',
					// '团队犯规'
					{
						cn: "二分命中",
						en: 0
					},
					{
						cn: "三分命中",
						en: 1
					},
					{
						cn: "盖帽",
						en: 2
					},
					{
						cn: "抢断",
						en: 3
					},
					{
						cn: "二分不中",
						en: 4
					},
					{
						cn: "三分不中",
						en: 5
					},
					{
						cn: "罚球不中",
						en: 6
					},
					{
						cn: "助攻",
						en: 7
					},
					{
						cn: "篮板",
						en: 8
					},
					{
						cn: "失误",
						en: 9
					},
					{
						cn: "犯规",
						en: 10
					},
					// { cn: '一分命中', en: 11},
					{
						cn: "罚球命中",
						en: 12
					},
					// { cn: '一分不中', en: 13},
					// { cn: '全场比赛结束', en: 15},
					{
						cn: "恢复暂停",
						en: 14
					},
					{
						cn: "团队犯规",
						en: 16
					},
					{
						cn: "罚球总命中率",
						en: 16
					},
					{
						cn: "一分总命中率",
						en: 16
					},
					{
						cn: "二分总命中率",
						en: 16
					},
					{
						cn: "三分总命中率",
						en: 16
					},
					{
						cn: "效率值",
						en: 16
					},
					{
						cn: "真实命中率",
						en: 16
					},
				],
				labelNeed: [
					"得分",
					"二分命中",
					"三分命中",
					"盖帽",
					"抢断",
					"二分不中",
					"三分不中",
					"罚球不中",
					"助攻",
					"篮板",
					"失误",
					"犯规",
					"罚球命中",
					"恢复暂停",
					"团队犯规",
					"罚球总命中率",
					"一分总命中率",
					"二分总命中率",
					"三分总命中率",
					"效率值",
					"真实命中率",
				],
				currentTeamName: "",
				searchTeamId: null,
				searchTeamName: '',
				matchNumber: 0,
				likeNum: 0,
				clickIndex: 0,
				LogContestAllObj: {},
			};
		},
		components: {
			BarChart,
			PieChart,
			playNews
		},
		onLoad({
			id,
			name,
			img,
			pageSource
		}) {
			this.getplayerLogContestAll(id)
			this.id = id;
			this.imageUrl = config.imageUrl;
			this.getList();
			this.name = name;
			this.img = img;
			this.scoringWay = uni.getStorageSync("scoringWay");
			this._getlive();
			this._getH5BriefInfo();
			this.getSaishituijian();
			this.getCansaiqiuduiList();
			localStorage.setItem("isLoggedIn", "false");
			uni.setNavigationBarTitle({
				title: name
			})
			this.$nextTick(() => {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					uni.showLoading({
						title: "数据加载中..."
					})
					// 微信中打开
					this.share();
				} else {
					// 普通浏览器中打开
				}
			})
			if (pageSource) { //页面来源
				this.tabTitle = 0
				this.changeTab(2)
				this.onSelctHeaderTab(2)
			}

			this.getTournamentNumFn()
			this.getlikeNumFn()
		},
		onShareAppMessage() {
			return {
				title: "运动数根",
				path: this.imageUrl + "pages/team",
				imageUrl: this.imageUrl + this.img,
			};
		},
		methods: {
			getplayerLogContestAll(id) {
				playerLogContestAll({
					id
				}).then(res => {
					this.LogContestAllObj = res.data
				})
			},
			goTabs(type) {
				this.clickIndex = type
				// uni.navigateTo({
				// 	url: '/pages/playNews?contestId=' + this.id
				// });
			},
			async getTournamentNumFn() {
				let params = {
					contestId: this.id
				};
				const response = await getTournamentNumApi(params);
				console.log('场次', response);
				this.matchNumber = response.data || 0
			},
			async getlikeNumFn() {
				let params = {
					contestId: this.id
				};
				const response = await getlikeNumApi(params);
				console.log('点赞数', response);
				this.likeNum = response.data
			},
			saveGood() {
				saveGoodApi({
					contestId: Number(this.id)
				}).then(res => {
					this.getlikeNumFn()
				})
			},
			selectSearch() {
				this.$refs.popup2.open()
			},
			refreshSearch() {
				this.searchTeamId = null
				this.searchTeamName = ''
				this.list = []
				this.getList()
			},
			searchSure(item) {
				this.searchTeamId = item.id
				this.searchTeamName = item.teamName
				// this.selectCansaiqiuduiList = []
				this.list = []
				this.getList()
				this.$refs.popup2.close()
			},
			changeId() {
				uni.setStorageSync('bindId', this.id)
				uni.navigateTo({
					url: `/pages/changeGroup?contestId=${this.id}` //changeGroup
				});
				// window.location.href = '/'
			},
			backToTeamList() {
				console.log(11111);
				this.cansaiqiuduiListTab = false;
				console.log(this.cansaiqiuduiListTab);
			},
			jumpLink(url) {
				window.location.href = url;
			},
			isLabelNeeded(typeStr) {
				return this.labelNeed.includes(typeStr);
			},
			async getShujuDataList() {
				let param = {
					teamId: this.teamId,
				};
				this.barChartShow = false;
				try {
					const res = await getShujuDataListApi(param);
					this.shujuDataList = res.data;
					this.loseNum = res.data.loseNum;
					this.winNum = res.data.winNum;
					this.num = res.data.num;
					this.scoringWay = res.data.scoringWay;
					this.teamData = res.data.teamCompare;
					this.copyTeamData = res.data.copyTeamCompare;
					this.barChartShow = true;
				} catch (error) {
					his.barChartShow = true;
				}
			},

			getCansaiqiuduiList() {
				// console.log("getCansaiqiuduiList id:" + this.id)
				getCansaiqiuduiApi({
					leagueId: this.id,
				}).then((res) => {
					this.total = res.total;
					getCansaiqiuduiApi({
						leagueId: this.id,
						pageNum: 1,
						pageSize: this.total,
					}).then((res) => {
						this.cansaiqiuduiList.push(...res.rows);
						if (this.cansaiqiuduiList.length == this.total) {
							this.loadingType = "no-more";
							return;
						}
					});
					// console.log('zhuyi:', res)
					// this.cansaiqiuduiList.push(...res.rows);
					// if (this.cansaiqiuduiList.length == this.total) {
					//     this.loadingType = "no-more";
					//     return;
					// }
				});
			},

			async getCansaiqiuduishujuList() {
				let filterKeyMap =
					this.scoringWay == 0 ? ["一分总命中率"] :
					this.scoringWay == 1 ? ["三分总命中率"] : [];
				this.chengyuanTableFilter = this.chengyuanTable.filter(
					(i) => !filterKeyMap.includes(i.cn)
				);
				// console.log("this.chengyuanTableFilter", filterKeyMap, this.chengyuanTableFilter);
				let param = {
					teamId: this.teamId,
				};
				const res = await getCansaiqiuduishujuListApi(param);
				let sortedArray = res.data.sort((a, b) => {
					return b.typeScoreSum - a.typeScoreSum;
				});
				this.cansaiqiuduishujuList = sortedArray;
			},

			selectTeam(data) {
				// console.log(data)
				this.cansaiqiuduistateTab = 0;
				this.currentTeamName = data.teamName;
				getLeagueH5TournamentList({
					contestId: this.id,
					state: this.tab,
					teamId: data.id,
					...this.pageData,
				}).then((res) => {
					this.selectCansaiqiuduiList = res.rows;
					this.total = res.total;
					this.list.push(...res.rows);
					if (this.list.length == this.total) {
						this.loadingType = "no-more";
						return;
					}
					this.teamLogo = data.teamLogo;
				});
				this.cansaiqiuduiListTab = true;
				this.teamId = data.id;
				this.getCansaiqiuduishujuList();
				this.getShujuDataList();

				setTimeout(() => {
					console.log(123);
					window.print();
				}, 3000);
			},

			async getSaishituijian() {
				try {
					// console.log("getSaishituijian id:" + this.id);
					let params = {
						contestId: this.id,
						type: 0
					};
					const response = await getSaishituijianApi(params); // 从接口获取数据
					console.log(response);
					this.saishituijian = response.rows; // 假设数据在response.data中
				} catch (error) {
					alert("获取数据失败：" + error.message);
				} finally {
					this.loading = false; // 无论成功与否都设置为完成状态
				}
			},
			//分享海报
			shareCanvas() {
				uni.navigateTo({
					url: `/pages/shareCanvas?id=${this.id}&name=${this.name}&img=${this.img}&time=${this.liansaiInfo.createTime}`,
					// url: '/pages/shareCanvas',
				});
			},
			share() {
				const isIOS = function() {
					var isIphone = navigator.userAgent.includes('iPhone')
					var isIpad = navigator.userAgent.includes('iPad')
					return isIphone || isIpad
				}
				if (!window.entryUrl) {
					window.entryUrl = encodeURIComponent(location.href.split('#')[0])
				}
				// let currentUrl = location.href //获取当前页面链接
				//获取url链接（如果有#需要这么获取）
				var currentUrl = encodeURIComponent(window.location.href.split('#')[0])
				// var currentUrl = isIOS() ? window.entryUrl : encodeURIComponent(window.location.href.split('#')[0])
				//获取url链接（如果没有#需要这么获取）
				// var currentUrl = encodeURIComponent(window.location.href);
				console.log('currentUrl', currentUrl);
				getsignature({
					url: currentUrl
				}).then((res) => {
					console.log('res数据', res);
					if (res.code == 200) {
						//获取的微信加签
						let obj = {
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							signature: res.data.signature,
							timestamp: res.data.timestamp,
						};
						//分享的内容
						let shareData = {
							title: this.name,
							desc: this.name,
							link: location.href,
							// imgUrl: "https://boyubasketball.oss-cn-shanghai.aliyuncs.com/17316574783461731656407-compressed-IMG_4036.PNG",
							imgUrl: this.imageUrl + this.img,
						};
						const metaImage = document.createElement('meta');
						metaImage.setAttribute('property', 'og:image');
						metaImage.setAttribute('content', this.imageUrl + this.img);
						document.head.appendChild(metaImage);
						//调用封装好的方法，传入微信加签和内容
						wexinShare(obj, shareData);
					} else {
						uni.showToast({
							title: "获取sdk参数失败!",
							icon: "none",
						});
					}
				});
			},
			reset() {
				this.allChoose = 0;
				this.types = "";
				this.selectedItems = [];
			},
			_getScore() {
				getScore({
					tournamentId: this.id,
				}).then((res) => {
					this.oneNum = res.data.teamOneScore;
					this.twoNum = res.data.teamTwoScore;
					this.subsection = res.data.subsection;
					this.contestName = res.data.contestName;
					this.teamOneName = res.data.teamOneName;
					this.teamTwoName = res.data.teamTwoName;
				});
				this.time = setInterval(() => {
					getScore({
						tournamentId: this.id,
					}).then((res) => {
						this.oneNum = res.data.teamOneScore;
						this.twoNum = res.data.teamTwoScore;
						this.subsection = res.data.subsection;
					});
				}, 5000);
			},
			_getLeagueH5LiveBegin() {
				this.isvideo = true;
				this.isBack = false;
				this._getScore();
				setliveNum(this.id);
				getLeagueH5LiveBegin({
					tournamentId: this.id,
					type: 1,
				}).then((res) => {
					this.videoSrc = res.rows[0].viewUrl;
					this.initVideo(res.rows[0].viewUrl);
				});
			},
			_getH5BriefInfo() {
				getH5BriefInfo({
					contestId: this.id
				}).then((res) => {
					this.liansaiInfo = res.data;
					this.imgList = this.liansaiInfo.img.split(",");
					let arrStr = this.liansaiInfo.auspiceName.split(",");
					this.newStrArr = arrStr.map((item, index) => {
						return item + (index < arrStr.length - 1 ? ",\n" : "");
					});
					let arrStr1 = this.liansaiInfo.undertakeName.split(",");
					this.newStrArr1 = arrStr1.map((item, index) => {
						return item + (index < arrStr1.length - 1 ? ",\n" : "");
					});
					let arrStr2 = this.liansaiInfo.jointName.split(",");
					this.newStrArr2 = arrStr2.map((item, index) => {
						return item + (index < arrStr2.length - 1 ? ",\n" : "");
					});
					let arrStr3 = this.liansaiInfo.titleName.split(",");
					this.newStrArr3 = arrStr3.map((item, index) => {
						return item + (index < arrStr3.length - 1 ? ",\n" : "");
					});
					let arrStr4 = this.liansaiInfo.sponsorName.split(",");
					this.newStrArr4 = arrStr4.map((item, index) => {
						return item + (index < arrStr4.length - 1 ? ",\n" : "");
					});
					let arrStr5 = this.liansaiInfo.sponsorName.split(",");
					this.newStrArr5 = arrStr5.map((item, index) => {
						return item + (index < arrStr5.length - 1 ? ",\n" : "");
					});
					// console.log(this.newStrArr, "this.newStrArr======");
				});
			},
			_getlive() {
				getlive({
					tournamentId: this.id,
					type: 1
				}).then((res) => {
					this.liveList = res.rows;
				});
			},
			onPlayLive(url) {
				this.isBack = true;
				this.videoSrc = url;
				this.isvideo = true;
				if (url.indexOf("mp4") != -1) {
					// console.log("mp4");
				} else {
					this.initVideo(url);
				}
			},
			initVideo(url) {
				this.$nextTick(() => {
					let videoElement = document.querySelector("#jswebrtc video");
					// console.log(videoElement.src, this.videoSrc)
					var hls = new Hls();
					hls.loadSource(this.videoSrc);
					hls.attachMedia(document.querySelector(`#jswebrtc video`));

					hls.on(Hls.Events.MANIFEST_PARSED, () => {
						uni.createVideoContext(`jswebrtc`, this).play();
					});
					hls.on(Hls.Events.ERROR, function(event, data) {
						console.error("HLS error:", data);
						if (data.details === "manifestLoadError") {
							// 处理 Manifest 加载错误
						}
					});
				});
			},
			changeTitleTab(tabTitle) {
				// console.log(this.id)
				if (tabTitle != 3) {
					this.cansaiqiuduiListTab = false;
					this.cansaiqiuduitab = 0;
				}
				// if(tabTitle == 4){
				// 	await getSaishituijianApi()
				// }
				this.tabTitle = tabTitle;
			},
			changecansaiqiuduiTab(cansaiqiuduitab) {
				// console.log("this.cansaiqiuduishujuList:" + this.cansaiqiuduishujuList)
				this.cansaiqiuduitab = cansaiqiuduitab;
			},
			ongetCanvas(id) {
				uni.navigateTo({
					url: "/pages/getCanvas?id=" + id,
				});
			},
			onSelctHeaderTab(index) {
				this.selectHeaderTab = index;
			},
			onSelctHeaderTabJ(index) {
				if (index == "") {
					this.allChoose = 0;
					this.selectedItems = [];
				} else {
					this.allChoose = 1;
					const itemIndex = this.selectedItems.indexOf(this.items[index]);
					if (itemIndex === -1) {
						this.selectedItems.push(this.items[index]);
					} else {
						this.selectedItems.splice(itemIndex, 1);
					}
				}
				this.selectedItemss = this.selectedItems.map((item) => {
					return item.id;
				});
				this.types = this.selectedItemss.join(",");
			},
			sure() {
				getrankingListH5({
					contestId: this.id,
					type: this.type,
					types: this.types || "",
				}).then((res) => {
					this.rankingList = res;
					// console.log(res, "----");
				});
			},
			//获取数据
			getList() {
				getLeagueH5TournamentList({
					teamId: this.searchTeamId,
					contestId: this.id,
					state: this.tab,
					...this.pageData,
				}).then((res) => {
					this.total = res.total;
					this.list.push(...res.rows);
					if (this.list.length == this.total) {
						this.loadingType = "no-more";
						return;
					}
				});
			},
			//切换
			changeTab(tab) {
				this.tab = tab;
				if (tab != 2) {
					this.list = [];
					this.loadingType = "none";
					this.pageData = {
						pageSize: 10,
						pageNum: 1,
					};
					this.getList();
				} else {
					this._getLeagueH5RankingList();
					getrankingList({
						contestId: this.id
					}).then((res) => {
						this.oneList = res;
					});
				}
			},
			changeCansaiqiuduiStateTab(stateId) {
				this.cansaiqiuduistateTab = stateId;
				let data = {
					contestId: this.id,
					state: stateId,
					teamId: this.teamId,
				};
				getLeagueH5TournamentList(data).then((res) => {
					this.selectCansaiqiuduiList = res.rows;
				});
			},
			//排行榜切换
			changeType(type) {
				this.type = type;
				this._getLeagueH5RankingList();
			},

			//排行榜数据
			_getLeagueH5RankingList() {
				getLeagueH5RankingList({
					contestId: this.id,
					type: this.type,
				}).then((res) => {
					this.rankingList = res;
				});
			},
			//赛事详情
			goTeamDetail(id, state) {
				uni.navigateTo({
					url: "/pages/unfinish?id=" +
						id +
						"&contestId=" +
						state.contestId +
						"&name=" +
						this.name +
						"&img=" +
						this.img,
				});
			},
		},

		async onReachBottom() {
			if (this.clickIndex == 0) {
				if (this.tab == 2) {
					this.loadingType = "none";
					return;
				}
				if (this.list.length == this.total) {
					this.loadingType = "no-more";
					return;
				}
				this.loadingType = "loading";
				this.pageData.pageNum += 1;
				this.getList();
			}
		},
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #efefef;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 372rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		padding: 40rpx;
		background-color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: 700;

		.title-tab {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;

			.title-left {
				width: 85%;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.shareBox {
				width: 15%;
				background: #41a863;
				color: #fff;
				padding: 10rpx;
				border-radius: 4rpx;
			}

			view {
				// padding-right: 40rpx;
			}

			.active {
				color: #ff6633 !important;
			}
		}
	}

	.take-in-team-box {
		background-color: #ffffff !important;

		.current-teamName-box {
			// color: ;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			height: 120rpx;
			width: 100%;
			position: relative;
			text-align: center;
			font-weight: 550;
			padding: 28rpx 30rpx 20rpx;

			// box-sizing: border-box;
			// background-color: red;
			// padding-top: 10rpx;
			// border-top: 1rpx solid gray;
			// border-radius: 20rpx;
			// background-color: #DFDFDF;
			// font-size: 40rpx;
			.teamName-back {
				width: 15%;
				// position: absolute;
				// float: left;
				background-color: #41a863;
				// font-size: 28rpx;
				// padding: 10rpx 20rpx;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				border-radius: 40rpx;

				image {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.teamName-real-box {
				width: 85%;
				font-size: 30rpx;
			}
		}
	}

	.saishituijian {
		width: 100%;

		.listInfo {
			width: 100%;

			.item {
				width: 100%;

				image {
					width: 100%;
				}
			}
		}
	}

	.body-box {
		width: 100%;
		background: #fff;
		padding: 20rpx;

		.take-in-team {
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 20rpx;

			.team-list-box {
				height: 100rpx;
				margin: 20rpx 0;
				display: flex;
				padding: 20rpx 0;
				box-sizing: content-box;

				.teamLogo {
					width: 20%;
					text-align: center;

					image {
						display: inline-block;
						width: 100rpx;
						height: 100rpx;
					}
				}

				.teamName {
					width: 80%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: flex-start;

					.team-name-span {
						width: 100%;
						height: 50%;
						font-weight: 520;
						font-size: 36rpx;
						letter-spacing: 5rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
					}

					.team-num-span {
						height: 50%;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
					}
				}
			}

			.team-list-box:nth-child(odd) {
				background-color: #f6f6f6;
			}
		}

		.listInfo {
			font-size: 28rpx;
			font-weight: 600;

			.listInfo-list {
				display: flex;
				padding-top: 10rpx;
			}
		}

		.team-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 28rpx 30rpx 20rpx;

			.team-title-left {
				margin-left: 10rpx;
				font-size: 24rpx;
				font-weight: 700;
			}

			.team-title-left::after {
				width: 76rpx;
				height: 12rpx;
				z-index: -99;
				position: absolute;
				left: 0;
				bottom: 8rpx;
				border-radius: 8rpx;
				background: -webkit-gradient(linear,
						left top,
						right top,
						from(#4f9770),
						to(rgba(0, 72, 128, 0)));
				background: linear-gradient(90deg, #4f9770, rgba(0, 72, 128, 0));
				content: "";
			}

			.team-title-right {
				color: #666;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.team-right-item {
					display: flex;
					align-items: center;

					.team-search {
						margin-right: 20rpx;
						margin-left: 4rpx;
					}
				}
			}
		}

		//
		.tab-box {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx 20rpx;
			display: flex;
			justify-content: space-around;
			color: #666;
			font-size: 24rpx;
		}

		.active {
			color: #ff6633 !important;
			border-bottom: 2rpx solid #ff6633;
			padding-bottom: 10rpx;
		}

		//
		.teamdetail {
			width: 100%;
			background-color: #efefef;
			border-radius: 10px;

			.team-time {
				width: 100%;
				padding: 0rpx 30rpx;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				color: #999;
			}

			.team-list-detail {
				width: 100%;
				background: #fff;
				padding: 10rpx;

				.shuju {
					display: flex;
					// justify-content: right;
					justify-content: left;
					padding-left: 20rpx;
					margin-top: 30rpx;
				}

				.detail {
					display: flex;
					justify-content: space-around;
					align-items: center;
					background: #fff;
				}

				.team-img {
					text-align: center;
					font-size: 22rpx;
					flex: 1;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.team-info {
					text-align: center;
					width: 200rpx;
					padding-top: 30rpx;
					flex: 1;

					.team-info-time {
						font-size: 30rpx;
					}

					.team-info-num {
						display: flex;
						justify-content: space-between;
						font-size: 40rpx;
						color: #1b1b1b;
						font-weight: 600;
						margin-top: 30rpx;
					}
				}

				.team-info-status {
					font-size: 24rpx;
					padding: 20rpx;
				}
			}

			.card-list {
				margin-top: 20rpx;
				padding: 20rpx;

				.info-card {
					border-radius: 10px;
				}
			}

			.bisailiebiao {
				box-sizing: border-box;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.team-list-detail {
					border-radius: 20rpx;
				}
			}
		}

		.teamBig-box {
			width: 100%;
			display: flex;
			padding: 25rpx;

			.teamBig-box-left {
				width: 35%;

				// background-color: red;
				.score-title {
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					font-weight: 550;
					// padding: 24rpx 0;
					// padding-left: 30%;
					font-size: 24rpx;
					color: #acacac;
					border-bottom: 2rpx solid #efefef;
					height: 74rpx;
					// background-color: red;
				}

				.oneTemeList {
					text-align: center;
					padding: 25rpx 0;
					font-size: 22rpx;
					height: 74rpx;

					.oneTemeList-name {
						padding-left: 10rpx;
					}
				}
			}

			.teamBig-box-right {
				width: 100%;

				.score-title {
					display: flex;
					flex-wrap: nowrap;
					width: 100%;
					height: 74rpx;
					line-height: 74rpx;
					// padding-left: 10%;
					font-size: 22rpx;
					color: #999;
					border-bottom: 2rpx solid #efefef;

					.score-title-img {
						height: 74rpx;
						width: 74rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							height: 60rpx;
							width: 60rpx;
							border-radius: 50%;
						}
					}

					.score-title-text,
					.score-title-img {
						text-align: center;
						flex: 0 0 70px;
					}
				}

				.score-title-res:nth-child(odd) {

					.score-title-text,
					.score-title-img {
						background-color: #ffece5;
					}
				}

				.oneTemeList-score {}
			}
		}

		.chengyuanTable-box {
			// background-color: red!important;
			padding: 0 !important;
			// padding: 10rpx 0!important;
			overflow: auto;
			width: 100%;

			table {
				// background-color: red;
				width: 100%;
				white-space: nowrap;
				background-color: #fefefe;
				overflow: auto;

				thead {
					tr {
						background-color: #dfdfdf;

						th {
							font-size: 22rpx;
							padding: 10rpx 20rpx;
						}
					}
				}

				tbody {

					// background-color: blue;
					tr:nth-child(odd) {
						background-color: #ffebe5;
					}
				}

				td {
					padding: 10rpx 20rpx;
					text-align: center;
				}

				.sticky-col {
					position: -webkit-sticky;
					/* Safari */
					position: sticky;
					left: 0;
					background-color: #fefefe;
					/* 确保背景颜色覆盖滚动条 */
					z-index: 1;
					/* 确保第一列在其他内容之上 */
				}

				// .sticky-col:nth-child(odd){
				// 	background-color: #FFEBE5; /* 确保背景颜色覆盖滚动条 */
				// }
			}
		}

		.data-chart {
			padding: 0;
			width: 100%;
			// background: red;
			// padding: 28rpx 30rpx 20rpx;
			// display: flex;
			// flex-wrap: nowrap;
			// justify-content: space-around;
			color: #000;
			font-size: 24rpx;
			padding-bottom: 200rpx;

			.top-info-show {
				// margin-top: 20rpx;
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;

				.left-show {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
				}

				.right-show {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					border-left: 1px solid gray;
				}
			}

			.data-stage-name {
				width: 100%;
				background-color: #efefef;
				padding: 20rpx;
			}

			.score-graph {
				// background-color: red!important;
				overflow: scroll;
			}

			.beat-graph {
				width: 100%;
				// height: 250px;
				display: flex;

				.beat-graph-detail {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100% / 3);
					height: 100%;
				}

				.beat-graph-detail:nth-child(odd) {
					// background-color: green;
				}
			}

			.average-competition {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.average-competition-detail {
					width: calc(100% / 3);
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 10rpx;
					border: 1px solid #efefef;

					.detail-score {
						width: 70%;
						height: 100%;
						font-size: 50rpx;
						color: #ff7344;
						font-weight: 550;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.score-type {
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: flex-end;
						width: 30%;
					}
				}

				.average-competition-detail:nth-child(even) {
					// background-color: #F6F6F6;
				}
			}
		}

		//排行榜
		.leaderboard {
			width: 100%;

			.leaderboard-title {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				font-size: 22rpx;
				font-weight: 400;
				color: rgb(153, 153, 153);
				border-bottom: 2rpx solid #efefef;
				overflow: auto;

				.leaderboard-title-left {
					width: 20%;
				}

				.leaderboard-title-right {
					width: 80%;
					display: flex;
					align-items: center;
					justify-content: center;

					view {
						width: calc(100% / 5);
						text-align: center;
						font-size: 28rpx;
						padding: 10rpx 0;
						font-weight: 500;
					}
				}
			}

			.leaderboard-detail {
				width: 100%;
				display: flex;

				.leaderboard-detail-left {
					width: 20%;
					height: 100%;

					.leaderboard-detail-left-title {
						box-sizing: border-box;
						height: 80rpx;
						font-size: 24rpx;
						color: #999;
						text-align: center;
						line-height: 80rpx;
					}

					.active1 {
						border-left: 6rpx solid #4f9770;
						color: #333;
						font-weight: 700;
						background: #fff;
					}
				}

				.leaderboard-detail-right-box {
					width: 80%;
					display: flex;
					flex-wrap: wrap;

					.leaderboard-detail-right {
						width: 100%;
						height: 100%;
						display: flex;
						height: 80rpx;
						text-align: center;

						.left-box {
							width: 100%;
							display: flex;
							align-items: center;

							view {
								min-width: calc(100% / 6);
								text-align: center;
								display: flex;
								align-items: center;
								justify-content: center;
								// white-space: nowrap;
								// overflow: auto;
								// text-align: left;
								font-size: 22rpx;
							}

							image {
								width: 53rpx;
								height: 53rpx;
								border-radius: 50%;
							}
						}

						.right_box {
							background-color: green;

							.zhong-box {
								margin-left: 10px;
								display: flex;
							}

							.teamName-box {
								margin-left: auto;
								display: flex;
							}

							.changjun-box {
								margin-left: auto;
								display: flex;
							}

							.total-box {
								margin-left: auto;
								display: flex;
							}
						}
					}

					.leaderboard-detail-right:nth-child(odd) {
						background-color: #ff663321;
					}
				}
			}
		}

		.video {
			margin-top: 25rpx;
			width: 100%;
			padding: 25rpx 0;
			font-size: 32rpx;

			.video-title {
				font-weight: 700;
			}

			.video-img {
				width: 70%;
				margin: auto;
				margin-top: 40rpx;
			}

			image {
				width: 100%;
			}

			.none-box {
				text-align: center;
				font-size: 400 !important;
				font-size: 28rpx;
				color: #999;
			}

			.video-box {
				margin: auto;
				font-weight: 700;
				font-size: 14px;
				text-align: center;
				padding: 2px;
				background: #3067ff none repeat scroll 0 0;
				color: #fff;
				width: 98px;
				height: 21px;
				line-height: 21px;
				border-radius: 10px;
			}

			.video-back {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				&>view {
					width: calc((100% / 3) - 20rpx);
					margin-bottom: 20rpx;
					text-align: center;

					&:nth-child(3n - 1) {
						margin: 0 20rpx;
					}
				}

				image {
					width: 189rpx;
					height: 189rpx;
					margin-bottom: 20rpx;
				}

				margin-top: 30rpx;
				font-size: 20rpx;
				color: red;

				.video-text {
					text-align: center;
				}
			}
		}

		.top-hader {
			display: flex;
			padding: 20rpx 20rpx;
			border-bottom: 1px solid #efefef;

			view {
				&:first-child {
					width: 300rpx;
					text-align: left;
				}

				width: calc((100% - 300rpx) / 4);
				text-align: center;
			}
		}

		.top-hader-list {
			display: flex;
			padding: 20rpx 20rpx;
			border-bottom: 1px solid #efefef;

			view {
				font-size: 24rpx;
				width: calc((100% - 300rpx) / 4);
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				&:first-child {
					display: flex;
					align-items: center;

					image {
						// flex: 1;
						width: 60rpx;
						height: 60rpx;
						border-radius: 300rpx;
						margin: 0 10rpx;
					}

					width: 300rpx;
					text-align: left;

					text {
						flex: 1;

						&:first-child {
							display: flex;
							flex: 0;
							width: 30rpx;
						}
					}
				}
			}
		}

		.header_tab {
			display: flex;

			.item {
				text-align: center;
				color: #c4c0c0;
				width: 50%;

				&.cur {
					color: #333;
					font-weight: 800;
				}
			}

			.itemBox {
				width: 100%;
				display: flex;
				white-space: nowrap;
				overflow-x: scroll;

				.item1:nth-child(2) {
					display: none;
				}

				.item1 {
					margin-top: 20rpx;
					margin-right: 10rpx;
					text-align: center;
					padding: 10rpx 20rpx;
					border: 1rpx solid #c4c0c0;
					border-radius: 10rpx;
					// color: #c4c0c0;
					width: 50%;

					&.cur1 {
						background: #e8e8e8;
						color: #ff6633;
						font-weight: 800;
					}
				}
			}
		}

		.tab-text {
			font-weight: bold;
			/* 字体加粗 */
		}

		.btn-box {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.btn {
				text-align: center;
				width: 40%;
				padding: 20rpx 30rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 10rpx;
			}

			.unset {
				background: #cccccc;
			}

			.sure {
				background: #ff6633;
			}
		}
	}

	.teamSelect {
		text-align: center;
		margin: 30rpx 0;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 20rpx;
	}
</style>